<script setup>
import { ref } from "vue";
import { useStore } from "../../store/store";
const store = useStore();
console.log(store.cardInfo);
// const price = ref(0);
// price.value = store.cardInfo.agentProduct.ka365Price;

const timestamp2Time = (time) => {
  // 使用Date对象将时间戳转换为日期对象
  const date = new Date(time);

  // 获取日期的各个部分，如年、月、日、时、分、秒
  const year = date.getFullYear(); // 年
  const month = date.getMonth() + 1; // 月 (注意月份从0开始，需要加1)
  const day = date.getDate(); // 日
  const hours = date.getHours(); // 时
  const minutes = date.getMinutes(); // 分
  const seconds = date.getSeconds(); // 秒

  // 构建日期字符串，例如：2022-10-08 14:30:00
  const formattedDate = `${year}-${month
    .toString()
    .padStart(2, "0")}-${day.toString().padStart(2, "0")} ${hours
    .toString()
    .padStart(2, "0")}:${minutes
    .toString()
    .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
  const ymdData = `${year}-${month.toString().padStart(2, "0")}-${day
    .toString()
    .padStart(2, "0")}`; // 输出格式化后的日期字符串
  return ymdData;
};

const copy = (copy) => {
  uni.setClipboardData({
    data: copy,
    success: (result) => {
      uni.showToast({
        title: "复制成功",
        icon: "none",
      });
    },
    fail: (error) => {
      console.log(error);
      uni.showToast({ title: "复制失败", icon: "none" });
    },
  });
};
</script>

<template>
  <view class="page">
    <view class="product">
      <!-- <view class="shop">
        <image class="shop-image" src="../../static/list_jcban.png" mode="" />
        <view class="introduce">
          <text class="name">店店有客年卡</text>
          <text class="edition">基础版</text>
          <text class="price">{{ price }}<text class="yuan">.00元</text></text>
        </view>
      </view> -->
    </view>
    <view class="annual">
      <view class="top">
        <text>年卡介绍</text>
      </view>
      <view class="bottom">
        <view style="margin-bottom: 30rpx;">版本：{{ store.cardInfo.productName }}</view>
        <view>卡额：十二个月（365天）</view>
        <view class="margin">合成视频数量：{{ store.cardInfo.useNum }}次</view>
        <view style="margin-bottom: 30rpx;">可授权人数：{{ store.cardInfo.quanNum }}人</view>
        <view style="margin-bottom: 30rpx; display: flex; justify-content: space-between"
          ><text style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis"
            >卡密：{{ store.cardInfo.kaMi }}</text
          >
          <view class="copy" v-if="store.isUse" @click="copy(store.cardInfo.kaMi)"
            >复制</view
          >
          <image
            v-else
            class="used-img"
            src="../../static/list_icon_yshyong.png"
            mode=""
          />
        </view>
        <view class="time"
          >购买时间:{{ timestamp2Time(Number(store.cardInfo.createDate)) }}</view
        >
      </view>
    </view>
    <view class="annual" v-if="!store.isUse" style="margin-top: 30rpx">
      <view class="top">
        <text>激活信息</text>
      </view>
      <view class="bottom">
        <view>激活状态：已使用</view>
        <view class="margin"
          >激活商户：{{ store.cardInfo.shop.business.weChatName }}</view
        >
        <view style="margin-bottom: 30rpx; display: flex; justify-content: space-between"
          ><text>激活日期：{{ timestamp2Time(store.cardInfo.useDate) }}</text>
        </view>
        <view class="time" style="color: rgb(69, 70, 74)"
          >有效期: {{ timestamp2Time(store.cardInfo.endDate) }}</view
        >
      </view>
    </view>
    <view> </view>
  </view>
</template>

<style lang="scss" scoped>
.page {
  padding-bottom: 300rpx;
  position: fixed;
  width: 100%;
  height: 100%;
  .product {
    padding: 30rpx;
    .shop {
      width: 690rpx;
      height: 208rpx;
      display: flex;
      padding: 24rpx;
      box-sizing: border-box;
      background-color: #fff;
      .shop-image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 28rpx;
        margin-right: 24rpx;
      }
      .introduce {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .name {
          font-size: 36rpx;
          font-weight: 700;
          color: rgb(69, 70, 74);
        }
        .edition {
          font-size: 24rpx;
          color: rgb(144, 147, 153);
        }
        .price {
          font-size: 32rpx;
          color: rgb(255, 55, 71);
          font-weight: 700;
          margin-top: 12rpx;
          margin-bottom: 10rpx;
          .yuan {
            font-size: 24rpx;
          }
        }
      }
    }
  }
  .annual {
    box-sizing: border-box;
    position: relative;
    padding: 0 30rpx;
    background-color: #fff;
    .top {
      height: 108rpx;
      display: flex;
      align-items: center;
      font-size: 32rpx;
      font-weight: 700;
      color: rgb(48, 49, 51);
      border-bottom: 1rpx solid rgb(220, 223, 230);
    }
    .bottom {
      padding: 30rpx 0;
      font-size: 28rpx;
      color: rgb(69, 70, 74);
      .margin {
        margin: 30rpx 0;
      }
      .copy {
        width: 104rpx;
        height: 48rpx;
        text-align: center;
        line-height: 48rpx;
        background-color: rgb(64, 158, 255);
        color: #fff;
        font-size: 28rpx;
        border-radius: 4rpx;
      }
      .used-img {
        position: absolute;
        bottom: 30rpx;
        right: 30rpx;
        width: 180rpx;
        height: 174rpx;
      }
      .time {
        font-size: 28rpx;
        // color: rgb(144, 147, 153);
      }
    }
  }
}
</style>
